<template>
    <div>
        <div class="mask_layer" @click="$emit('onCancel')">

        </div>
        <el-card class="danger_op_win">
        <p>{{text}}</p>
        <br>
        <div>
            <el-checkbox v-model="iKnow">我已经了解此风险，并决定执行此操作：</el-checkbox>
            <br><br>
            <div>
                <el-button size="small" @click="$emit('onOk')" :disabled="!iKnow" >确定</el-button>
                <el-button size="small" @click="$emit('onCancel')">取消</el-button>
            </div>
        </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        props:{
            text:{
                default:"你确定执行此操作吗？"
            }
        },
        name: "DangerOpWin",
        data(){
            return{
                iKnow:false
            }
        }
    }
</script>

<style scoped>
    .mask_layer{
        position: absolute;
        z-index:20;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.2);
    }
.danger_op_win{
    position: absolute;
    z-index:30;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 500px;
}
</style>